<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
    <!-- #endif -->
  </page-meta>
  <view class="bg-white min-h-full box-border">
    <view class="flex items-center" style="margin:500rpx 20rpx">
      <view class="w-full">
        <!-- #ifdef MP-WEIXIN -->
        <u-button
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
            shape="circle"
            :plain="true"
            :customStyle="{
                        background: '#f9b65b',
                        color: 'white',
                        borderRadius: '60rpx'
                    }"
        >
          绑定微信手机号
        </u-button>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { userMnpMobile } from '@/api/user'

import { reactive, ref } from 'vue'
import { useUserStore } from '@/stores/user'

const codeTips = ref('')

const userStore = useUserStore()
const codeChange = (text: string) => {
  codeTips.value = text
}

const formData = reactive({
  type: 'bind',
  mobile: '',
  code: ''
})
// 微信小程序 绑定｜｜修改用户手机号
const getPhoneNumber = async (e): Promise<void> => {
  const { encryptedData, iv, code } = e.detail
  const data = {
    code,
    encrypted_data: encryptedData,
    iv
  }
  if (encryptedData) {
    await userMnpMobile({
      ...data
    })
    uni.$u.toast('操作成功')
    await uni.navigateBack()
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
}
</style>
